<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{a}}</h1>
        <h2>{{b}}</h2>
        <button onclick="changeH1();">变更h1的值</button><button onclick="changeH2();">再一次设值</button><br>
        <button onclick="change3();">变换model容器</button>
    </div>
    <div id="app2">
        <h1 style="color: red">{{a}}</h1>
        <button onclick="changeH1();">变更h1的值</button><button onclick="changeH2();">再一次设值</button>
    </div>
</body>
<script>

    var vm = new Vue({
        el:"#app",
        data:{
            a:'this is test',
            b:''
        },
        created:function () {
            console.log("vm is create,a is:" + this.a);
        }
    });
    var changeH1 = function () {
        vm.a = "this is change value!";
        vm.b = "this b value!";
    }
    var changeH2 = function () {
        vm.$data.a = "this second change value!";
    }
    var change3 = function () {
        /**
         * 不能变更el
         * @type {string}
         */
        vm.$el = document.getElementById('app2');
    }
    vm.$watch('a',function (newValue, oldValue) {
        alert("vm.a change value from '"+ oldValue + "' to '"+newValue+"'!" );
    })
</script>
</html>